<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<body >

<div class="home_bac" id="app">
	<!--头部-->
	<div th:replace="/pc/home/common :: header"></div>

	<div class="home_mol">
		<div class="home_mtab">
			<p class="home_tit">Auction Order</p>
			<div class="order_bot">
				<div class="order_iwp">
					<div class="clearfix">
						<img src="/images/a19.png" class="auction_user">
						<input type="text" value="8" class="auction_input" v-model="startPic">
						<p class="auction_tih">-</p>
						<input type="text" value="48" class="auction_input" v-model="endPic">
						<div class="auction_tbmt"><img src="/images/a14.png" v-on:click="search"></div>
						<input type="button" value="Auction" class="auction_button">
					</div>

					<ul class="order_btpl" th:if="${data.orderListLength == 0}" style="height: 40px;">
						<li class="clearfix">
							<div class="order_ohi" align="center">
								<p class="order_pbs" >NoData</p>
							</div>
						</li>
					</ul>

					<ul class="order_btpl" th:if="${data.orderListLength > 0}">
						<li class="clearfix">
							<p class="order_pbt">OrderId：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_prefix_name+order.order_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">OrderStatus：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_status_name}}</p>
							</div>
						</li>
						<!--<li class="clearfix">
							<p class="order_pbt">User_id：</p>
							<div class="order_ohi">
								<p class="order_pbs">Xiaotian,Wang</p>
							</div>
						</li>-->
						<li class="clearfix">
							<p class="order_pbt" >ContactName：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_name}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">EmailContact：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_email}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CustoSum：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_sum}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">DriverPhone：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.driver_phone}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CarrierName：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.carrier_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CarrierPhone：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.carrier_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">TimeDepart：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.time_depart}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">FromWhere：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.fromwhere}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">OrderVoucher：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_voucher}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">ExtraRequest：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.extra_request}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Stop1：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.stop1}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Stop2：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop2}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Stop3：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop3}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Stop4：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop4}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Stop5：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop5}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">ToWhere：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.towhere}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">TimeReturn：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.time_return}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">EstTimeNeeded：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.est_time_needed}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">VehicleType：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.vehicle_type}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">VehiclePlate：</p>
							<div class="order_ohi">
								<p class="order_pbs" v-text="order.vehicle_plate">{{order.vehicle_plate}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CustoCosts：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_costs}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">FlightId：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.flight_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">BigLuggage：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.big_luggage}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CarryLuggage：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.carry_luggage}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Babyseats_s：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.babyseats_s}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Babyseats_b：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.babyseats_b}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Trailer：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.trailer}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">Toll：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.toll}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">GST：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.GST}}</p>
							</div>
						</li>
					</ul>
					<div class="clearfix order_uita">
						<a v-if="page>1" href="#" :class="active==5 ? 'active' : '' " v-on:click="preOrder">PreOrder</a>
						<a href="#" :class="active==6 ? 'active' : '' " v-on:click="nextOrder">NextOrder</a>
					</div>
				</div>
			</div>
		</div>
		<!--底部菜单-->
		<div th:replace="/pc/home/common :: home_foot"></div>
	</div>
	<div class="shuttle_pfix">
		<div class="shuttle_fwap">
			<p class="shuttle_tit">Auction</p>
			<img src="/images/a15.png" class="shuttle_x">
			<div class="shuttle_hwap">
				<p class="shuttle_hit">User Name</p>
				<p class="order_pbs" th:text="${session.currentUser.avatar}" ></p>
				<p class="shuttle_hit">Last Time</p>
				<!--<input type="text" class="shuttle_hinput">-->
				<p class="order_pbs" v-if="order.auctionList" v-text="order.auctionList.length == 1 ? order.auctionList[0].auction_amount : 0"></p>
				<p class="shuttle_hit">Offer</p>
				<input type="number" class="shuttle_hinput" v-model="auction_amount">
				<input type="button" class="shuttle_but" value="Confirm" v-on:click="auction">
			</div>
		</div>
	</div>
</div>




<script th:inline="javascript">
// nav
$(document).ready(function($){
	$('.cd-3d-nav-trigger').on('click', function(){
		toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
	});

	function toggle3dBlock(addOrRemove) {
		if(typeof(addOrRemove)==='undefined') addOrRemove = true;	
		$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
	}
});

// 弹出层
$(document).on("click",".auction_button",function(){
	$(".shuttle_pfix").show();
})
$(document).on("click",".shuttle_x",function(){
	$(".shuttle_pfix").hide();
})

var laydate = null, laypage = null, layer = null, table = null, carousel = null, upload = null, element = null;
layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element' ], function() {
	laydate = layui.laydate, //日期
	layer = layui.layer //弹层
	//国际版
	/*laydate.render({
        elem: '#txtBeginDate'
        ,lang: 'en'
        ,btns:[ 'now', 'confirm']
        ,value:new Date()
    });*/
	laydate.render({
		elem: '#startAndEndTime'
		,lang: 'en'
		,btns:[ 'now', 'confirm']
		/*,value:new Date()*/
		,type: 'datetime'
		,range: true
	});

});

var orderList = JSON.parse('[[${data.orderList}]]');
var app = new Vue({
	el:"#app",
	data:{
		startPic:null,
		endPic:null,
		order:orderList[0],
		startAndEndTime:"",
		order_status:"0",
		auction_amount:[[${minAuctionAmount}]],
		page:1
	},
	methods: {
		search: function () {
			let self = this
			// console.log("ajax调用搜索订单接口")
			$.ajax({
				url:Bus4uUtil.serverUrl+"/order/search",
				type:"post",
				data:{
					start:self.startPic,
					end:self.endPic,
					order_status:4,
					page:1
				},
				success:function(d){
					if(d.code=="0"){
						layer.msg("搜索成功")

					}else{
						layer.msg(d.msg)
					}
				}
			});
		},
		/*提交竞拍价格*/
		auction:function(){
			if(!this.auction_amount){
				console.log("提交竞拍价格"+this.auction_amount);
				layer.msg("提交竞拍金额不能为空!")
				return false;
			}
			if(this.auction_amount < [[${minAuctionAmount}]]){
				layer.msg("提交失败:输入竞价不得低于$[[${minAuctionAmount}]]!")
				return false;
			}
			if(this.auction_amount > 99999999){
				layer.msg("提交失败:输入竞价不得高于100000000!")
				return false;
			}
			if([[${auctionCount}]] > 4){
				layer.msg("提交失败:此订单已经有[[${auctionCount}]] 人参与竞价!")
				return false;
			}
			$.ajax({
				url:Bus4uUtil.serverUrl+"/auction/save",
				type:"post",
				data:{
					order_id:this.order.order_id,
					auction_amount:this.auction_amount,
					/*order_status:this.order.order_status*/
				},
				success:function(d){
					if(d.code=="0"){
						layer.msg("提交成功!")
						location.href="/home/auctionOrder.html";
					}else{
						layer.msg(d.msg)
					}
				}
			});

		},
		//下一条 订单
		nextOrder:function () {
			this.page++;
			let self = this;
			this.active = 6;
			$.ajax({
				url:Bus4uUtil.serverUrl+"/order/search",
				type:"post",
				data:{
					start:self.startPic,
					end:self.endPic,
					order_status:4,
					page:this.page,
					limit:1,
				},
				success:function(d){
					if(d.code=="0"){
						self.order = d.result.list[0];
						layer.msg("搜索成功")
					}else{
						layer.msg(d.msg)
					}
				}
			});

		},
		//上一条 订单
		preOrder:function () {
			this.page--;
			let self = this;
			this.active = 5;
			$.ajax({
				url:Bus4uUtil.serverUrl+"/order/search",
				type:"post",
				data:{
					start:self.startPic,
					end:self.endPic,
					order_status:4,
					page:this.page,
					limit:1,
				},
				success:function(d){
					if(d.code=="0"){
						self.order = d.result.list[0];
						layer.msg("搜索成功")
					}else{
						layer.msg(d.msg)
					}
				}
			});
		}
	},
});
</script>
</body>
</html>
